<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                 <businessL/>
                <div class="datare">
                    <div class="ra">投诉举报</div>
                    <el-steps simple style="margin-top: 35px;" :active="active" finish-status="success">
                        <el-step title="1 选择投诉类型" @click.native="ruku1(1)"></el-step>
                        <el-step title="2 投诉举证" @click.native="ruku1(2)"></el-step>
                        <el-step title="3 被投诉举证" @click.native="ruku1(3)"></el-step>
                        <el-step title="4 平台处理结果" @click.native="ruku1(4)"></el-step>
                    </el-steps>
                    <!-- 第一块 -->
                    <div v-if="active === 1">
                        <div class="ltkbox">
                            <div class="ltkbox_b">
                                <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                                <div class="ltkbox_b_r">
                                    <div>真皮百搭女包</div>
                                    <p>颜色:<span style="margin-right:20px">黑色</span>颜色:<span>黑色</span></p>
                                </div>
                            </div>
                            <div>卖家：<span>￥{{jine}}</span></div>
                            <div>联系电话：<span>￥{{jine}}</span></div>
                            <div>订单号：<span>￥{{jine}}</span></div>
                            <div>成交时间：<span>￥{{jine}}</span></div>
                            <div>单价：<span>￥{{jine}}</span></div>
                            <div>商品总价：<span>￥{{jine}}</span></div>
                            <div>类型：<span>￥{{jine}}</span></div>
                            <div>问题：<span>￥{{jine}}</span></div>
                        </div>
                    </div>
                    <div v-if="active === 2">
                        <div class="ltkbox">
                            <div>等待买家投诉举证...</div>
                            <div class="ltkbox_b">
                                <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                                <div class="ltkbox_b_r">
                                    <div>真皮百搭女包</div>
                                    <p>颜色:<span style="margin-right:20px">黑色</span>颜色:<span>黑色</span></p>
                                </div>
                            </div>
                            <div>卖家：<span>￥{{jine}}</span></div>
                            <div>联系电话：<span>￥{{jine}}</span></div>
                            <div>订单号：<span>￥{{jine}}</span></div>
                            <div>成交时间：<span>￥{{jine}}</span></div>
                            <div>单价：<span>￥{{jine}}</span></div>
                            <div>商品总价：<span>￥{{jine}}</span></div>
                            <div>类型：<span>￥{{jine}}</span></div>
                            <div>问题：<span>￥{{jine}}</span></div>
                        </div>
                    </div>
                    <div v-if="active === 3">
                        <div class="ltkbox">
                            <div class="ltkbox_b">
                                <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                                <div class="ltkbox_b_r">
                                    <div>真皮百搭女包</div>
                                    <p>颜色:<span style="margin-right:20px">黑色</span>颜色:<span>黑色</span></p>
                                </div>
                            </div>
                            <div>卖家：<span>￥{{jine}}</span></div>
                            <div>联系电话：<span>￥{{jine}}</span></div>
                            <div>订单号：<span>￥{{jine}}</span></div>
                            <div>成交时间：<span>￥{{jine}}</span></div>
                            <div>单价：<span>￥{{jine}}</span></div>
                            <div>商品总价：<span>￥{{jine}}</span></div>
                            <div>类型：<span>￥{{jine}}</span></div>
                            <div>问题：<span>￥{{jine}}</span></div>
                            <el-form label-width="100px">
                                <el-form-item label="商家说明:" prop="desc">
                                    <el-input type="textarea"></el-input>
                                </el-form-item>
                                <el-form-item label="商家举证:" prop="desc">
                                    <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            
                        </div>
                    </div>

                    <div v-if="active === 4">
                        <div class="ltkbox">
                            <div>经查证，本次投诉举报成立，平台给予您警告处分，请及时更改不规范行为，三次警告后商家账号将查封！</div>
                            <p>平台处理时间:2019-11-28 16:45:02</p>
                            <div class="ltkbox_b">
                                <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                                <div class="ltkbox_b_r">
                                    <div>真皮百搭女包</div>
                                    <p>颜色:<span style="margin-right:20px">黑色</span>颜色:<span>黑色</span></p>
                                </div>
                            </div>
                                <div>卖家：<span>￥{{jine}}</span></div>
                                <div>联系电话：<span>￥{{jine}}</span></div>
                                <div>订单号：<span>￥{{jine}}</span></div>
                                <div>成交时间：<span>￥{{jine}}</span></div>
                                <div>单价：<span>￥{{jine}}</span></div>
                                <div>商品总价：<span>￥{{jine}}</span></div>
                                <div>类型：<span>￥{{jine}}</span></div>
                                <div>问题：<span>￥{{jine}}</span></div>
                                <el-form label-width="100px">
                                    <el-form-item label="商家说明:" prop="desc">
                                        <div>产品详情页也注明发货时间为七天</div>
                                    </el-form-item>
                                    <el-form-item label="商家举证:" prop="desc">
                                        <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                                    </el-form-item>
                                </el-form>
                            
                        </div>
                    </div>
                  <businessF/>  
                 
           
                </div>
              </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
          active:1,
          shus:[{
            value: '选项1',
            label: '顺丰'
          }],
          danha:11111111111111,
          options: [{
          value: '选项1',
          label: '七天无理由退款'
        }, {
          value: '选项2',
          label: '不喜欢'
        }, {
          value: '选项3',
          label: '太大了'
        }],
        value: '',
        twotime:"2018-12-18 16:22:28",
        jine:"360.00",
        imageUrl: ''
      }
    },
    methods: {
      ruku1(ax){
          this.active=ax
      },

      //上传头像
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .el-textarea {
  width: 290px;
}
.demo-ruleForm {
  margin-top: 20px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.ltkbox{
    width: 90%;
    margin:20px auto;
}
.ltkbox_b{
    display: flex;
}
.ltkbox_b_r{
    margin-left: 10px;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
}
/* 上传头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: solid 1px rgb(220,220,220);
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /* 完 */
</style>